<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="ruleForm"
				:model="queryData"
				label-width="100px"
				label-suffix=":"
				:inline="true"
				class="demo-ruleForm"
			>
				<el-form-item
					:label="`${$t('dxn.hand_account.AuditBillId')}`"
					prop="id"
				>
					<el-input
						v-model.trim="queryData.id"
						v-input="{ name: 'symbols' }"
						clearable
						style="width: 210px"
						:placeholder="`${$t('dxn.hand_account.please_enter')}`"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('dxn.hand_account.status')}`"
					prop="verifyStatusList"
				>
					<el-select
						v-model="queryData.verifyStatusList"
						clearable
						:placeholder="`${$t('common.select_all')}`"
						multiple
					>
						<el-option
							v-for="item in statusOptions"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('dxn.hand_account.date_time')}`"
					prop="dateTime"
				>
					<el-date-picker
						v-model="queryData.dateTime"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('dxn.hand_account.startTime')"
						:end-placeholder="$t('dxn.hand_account.endTime')"
						format="yyyy-MM-dd HH:mm:ss"
						:picker-options="pickerShortcut2"
						:default-time="defaultTime"
						value-format="timestamp"
						align="right"
					></el-date-picker>
				</el-form-item>
				<el-form-item
					:label="`${$t('dxn.hand_account.checkAccountResult')}`"
					prop="verifyResultList"
				>
					<el-select
						v-model="queryData.verifyResultList"
						clearable
						:placeholder="`${$t('common.select_all')}`"
						multiple
					>
						<el-option
							v-for="item in checkAccountResultList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('dxn.hand_account.tableId')}`"
					prop="tableCode"
				>
					<el-input
						v-model.trim="queryData.tableCode"
						v-input="{ name: 'symbols' }"
						clearable
						style="width: 210px"
						:placeholder="`${$t('dxn.hand_account.please_enter')}`"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="disabledSearch"
						:loading="disabledSearch"
						size="medium"
						@click="handleSearch"
					>
						{{ $t('dxn.hand_account.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-right"
						size="medium"
						@click="reset"
					>
						{{ $t('dxn.hand_account.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90660087')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="exportExcel"
					>
						{{ $t('dxn.hand_account.export_excel') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<div class="total">
				总计: 核账失败 {{ summary.verifyFailNum }} 条，未核账
				{{ summary.notVerifyNum }} 条
			</div>
			<el-table
				ref="refTable"
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				border
				:data="list"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
				highlight-current-row
				header-align="center"
				@sort-change="handleTableSort"
			>
				<el-table-column
					type="index"
					:label="`${$t('dxn.game_rule.serial_number')}`"
					width="80"
					align="center"
				/>
				<el-table-column
					:label="`${$t('dxn.hand_account.AuditBillId')}`"
					min-width="180"
					align="center"
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.id || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.hand_account.accountType')}`"
					min-width="100"
					align="center"
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.type == 0 ? '每桌核账' : '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.hand_account.status')}`"
					min-width="100"
					align="center"
				>
					<template slot-scope="scope">
						<span>
							{{
								getTypeName(
									scope.row.verifyStatus,
									statusOptions
								) || '-'
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.hand_account.tableId')}`"
					min-width="180"
					align="center"
				>
					<template slot-scope="scope">
						<div
							v-if="scope.row.tableCode"
							class="blueColor decoration"
							@click="
								handleJump({
									path:
										'/dxn/gameManager/cardTablesList/cardTablesBase',
									query: {
										tableId: scope.row.tableCode
									}
								})
							"
						>
							{{ scope.row.tableCode }}
						</div>
						<div v-else>-</div>
					</template>
				</el-table-column>
				<el-table-column
					prop="name"
					:label="`${$t('dxn.hand_account.gameName')}`"
					min-width="100"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ typeFilter(scope.row.gameType, 'gameType') }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.hand_account.startTime')}`"
					min-width="160"
					align="center"
					show-overflow-tooltip
					prop="startTime"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ parseTime(scope.row.startTime) }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.hand_account.endTime')}`"
					min-width="160"
					align="center"
					show-overflow-tooltip
					prop="endTime"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ parseTime(scope.row.endTime) }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.hand_account.players_bring_in')}`"
					min-width="160"
					align="center"
					show-overflow-tooltip
					prop="bringIn"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{
							handleNumber(scope.row.currency, scope.row.bringIn)
						}}
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.hand_account.players_bring_out')}`"
					min-width="160"
					align="center"
					show-overflow-tooltip
					prop="bringOut"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{
							handleNumber(scope.row.currency, scope.row.bringOut)
						}}
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.hand_account.handServiceCharge')}`"
					min-width="160"
					align="center"
					show-overflow-tooltip
					prop="handPump"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{
							handleNumber(scope.row.currency, scope.row.handPump)
						}}
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.hand_account.insuredNetAmount')}`"
					min-width="160"
					align="center"
					show-overflow-tooltip
					prop="insuranceNetAmount"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span
							:style="
								handleNumberColor(scope.row.insuranceNetAmount)
							"
						>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.insuranceNetAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					label="鱿鱼钱包带入"
					min-width="160"
					align="center"
					show-overflow-tooltip
					prop="squidBringInAmount"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.squidBringInAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					label="鱿鱼钱包带出"
					min-width="160"
					align="center"
					show-overflow-tooltip
					prop="squidBringOutAmount"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.squidBringOutAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					label="鱿鱼钱包支付"
					min-width="160"
					align="center"
					show-overflow-tooltip
					prop="squidPay"
					sortable="custom"
				>
					<template slot-scope="scope">
						<span :style="handleNumberColor(scope.row.squidPay)">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.squidPay
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					:label="`${$t('dxn.hand_account.checkAccountResult')}`"
					min-width="160"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							:class="{ colorRed: scope.row.verifyResult == 2 }"
						>
							{{
								getTypeName(
									scope.row.verifyResult,
									checkAccountResultList
								) || '-'
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					fixed="right"
					:label="`${$t('dxn.hand_account.operate')}`"
					min-width="100"
					align="center"
				>
					<template slot-scope="scope">
						<el-button
							class="text-link"
							type="text"
							:loading="scope.row.loading"
							@click="handleManualExecution(scope.row)"
							v-if="hasPermission('90660089')"
						>
							{{ $t('dxn.hand_account.manualExecution') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="$store.getters.pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
	</main-content>
</template>

<script>
import { routerNames } from '@/utils/consts'
import dayjs from 'dayjs'
import list from '@/mixins/list'
import MainContent from '@/components/MainContent/index.vue'
import dxnMixin from '@/mixins/dxnMixin'
const start = () =>
	dayjs()
		.startOf('day')
		.subtract(6, 'day')
const end = () => dayjs().endOf('day')
export default {
	name: routerNames.tableAccount,
	components: {
		MainContent
	},
	mixins: [list, dxnMixin],
	data() {
		return {
			columnOrder: {},
			disabledSearch: false,
			exportBtnLoading: false,
			tableHeight: 480,
			otherDependenComponents: ['addBtn'],
			queryData: {
				id: '',
				verifyStatusList: [],
				dateTime: [start(), end()],
				verifyResultList: [],
				tableCode: '',
				handId: ''
			},
			gameList: [],
			summary: {
				verifyFailNum: '',
				notVerifyNum: ''
			},
			statusOptions: [
				{
					code: 0,
					description: '进行中'
				},
				{
					code: 1,
					description: '已核算'
				}
			],
			checkAccountResultList: [
				{
					code: 0,
					description: '未核账'
				},
				{
					code: 1,
					description: '核账成功'
				},
				{
					code: 2,
					description: '核账失败'
				}
			]
		}
	},
	methods: {
		getCurrentParams() {
			const [startTime, endTime] = this.queryData.dateTime || []
			const params = {
				...this.queryData,
				startTime: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				endTime: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			if (!params.verifyStatusList?.length) {
				params.verifyStatusList = undefined
			}
			if (!params.verifyResultList?.length) {
				params.verifyResultList = undefined
			}
			delete params.dateTime
			return params
		},
		loadData() {
			const params = this.getParams(this.getCurrentParams())
			this.loading = true
			this.disabledSearch = true
			this.list = []
			this.$api
				.queryVerifyTable(params)
				.then((res) => {
					this.loading = false
					this.disabledSearch = false
					const { record = [], totalRecord, summary } = res.data || {}
					this.list = record.map((item) => {
						return {
							...item,
							loading: false
						}
					})
					this.total = totalRecord || 0
					this.summary = summary || {
						verifyFailNum: '',
						notVerifyNum: ''
					}
				})
				.catch(() => {
					this.loading = false
					this.disabledSearch = false
				})
		},
		handleSearch() {
			this.clearTableSort()
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			this.resetQueryData()
			this.pageNum = 1
			this.queryData.dateTime = [start(), end()]
			this.loadData()
		},
		exportExcel() {
			const params = this.getParams(this.getCurrentParams())
			this.deleteExportParams(params)
			this.exportBtnLoading = true
			this.exportExcelPublic({
				api: 'exportVerifyTable',
				params
			}).finally(() => {
				this.exportBtnLoading = false
			})
		},
		// 跳转
		handleJump(obj) {
			this.$router.push(obj)
		},
		// 手动执行
		handleManualExecution(row) {
			row.loading = true
			this.$api
				.manualCheckVerifyTable({ id: row.id })
				.then((res) => {
					this.$message.success('执行成功')
					this.loadData()
				})
				.finally(() => {
					row.loading = false
				})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-range-input {
	background: #fff;
}
.decoration {
	text-decoration: underline;
	cursor: pointer;
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
.header-top-line {
	margin-top: -8px;
}
::v-deep .el-icon-question:after {
	font-size: 18px;
	margin-left: -2px;
}
.colorRed {
	color: red;
}
.total {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: 10px;
	font-size: 12px;
}
</style>
